<template>
  <el-dialog :title="isEdit?'编辑情形':'创建情形'" :visible.sync="showAdd" width="60%">
    <div class="list">
      <div class="item">
        <el-form label-width="150px">
          <el-form-item label="输入情形名称：" required>
            <div style="display: flex">
              <el-input v-model="name" placeholder="请输入情形名称"></el-input>
              <el-button
                type="primary"
                plain
                size="mini"
                style="margin-left: 10px"
                @click="addOption()"
              >+添加选项</el-button>
            </div>
          </el-form-item>
          <div v-for="(x, xIndex) in options" :key="xIndex">
            <el-form-item label="输入选项：" required>
              <div style="display: flex">
                <el-input
                  v-model="x.situationItemName"
                  placeholder="请输入选项"
                  style="width: 200px; margin-right: 10px"
                ></el-input>
                <el-button type="danger" plain size="mini" @click="deleteItem(xIndex)">删除</el-button>
                <el-button type="primary" plain size="mini" @click="openAddMaterial(xIndex)">+添加材料</el-button>
                <div class="dataBox">
                  <span>关联材料：</span>
                  <el-tag
                    closable
                    style="margin-right:5px;"
                    @close="handleClose(xIndex,yIndex)"
                    v-for="(y, yIndex) in x.materialObjs"
                    :key="yIndex"
                  >{{y.materialName}}</el-tag>
                  <!-- <a
                    href="javascript:;"
                    v-for="(y, yIndex) in x.materialObjs"
                    :key="yIndex"
                  >{{ y.materialName }}</a>-->
                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showAdd = false">取 消</el-button>
      <el-button type="primary" @click="addSituation()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { addSituation } from '@/api/situation/index';
  export default {
    name: 'addSituation',
    data() {
      return {
        showAdd:false,
        isEdit:false,
        name:'',
        nowIndex:0,
        options:[
          {
            situationItemName:'',
            materialObjs: []
          }
        ]
      };
    },

    methods: {
      insureAddMaterial(opt){
        if(opt && opt.length !== 0){
          opt.forEach(e=>{
            let hasMaterial = false;
            if(this.options[this.nowIndex].materialObjs){
              hasMaterial = this.options[this.nowIndex].materialObjs.some(o=>{
                return e.materialId == o.materialId;
              })
            }else{
              this.options[this.nowIndex].materialObjs = [];
            }
            if(!hasMaterial){
              this.options[this.nowIndex].materialObjs.push(e);
            }
          })
        }
      },
      handleClose(xIndex,yIndex){//删除选中材料
        this.options[xIndex].materialObjs.splice(yIndex,1);
      },
      openAddMaterial(index){//打开添加材料
        this.nowIndex = index;
        this.$emit('openAddMaterial');
      },
      addOption() {
        //添加新选项
        this.options.push({
          situationItemName: '',
          materialObjs: []
        });
      },
      deleteItem(xIndex) {
        //删除当前选项
        this.options.splice(xIndex, 1);
      },
      addSituation(){

        if(!this.name){
          this.$message.warning('请输入情形管理名称');
          return false;
        }

        let hasAllData = this.options.every(e=>{
          return e.situationItemName;
        })

        if(!hasAllData){
          this.$message.warning('请填写完整选项信息');
          return false;
        }

        let params = {
          situationObjectName:this.name,
          situationItems:this.options
        }

        if(this.isEdit){
          params.situationObjectId = this.situationObjectId;
        }

        addSituation(params).then(res=>{
          if(res.data.code == 200){
            this.showAdd = false;
            this.name = '';
            this.options = [
              {
                situationItemName:'',
                materialObjs: []
              }
            ];
            this.$message({
                  message: this.isEdit?'编辑成功':'添加成功',
                  type: 'success'
                });
            this.$emit('addSuccess');
          }
        })
      },
      getDetails(opt){//获取详情
        this.name = opt.situationObjectName;
        this.options = opt.situationItems;
        this.situationObjectId = opt.situationObjectId;
      }
    },
    mounted() {}
  };
</script>

<style lang="scss" scoped>
.el-button{
  max-height: 40px;
}
.list {
  padding: 20px;
  background: rgba(90, 145, 184, 0.1);
  .item {
    padding: 10px 0;
  }
  .sonBox {
    margin-bottom: 5px;
    position: relative;
    .deleteSon {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 20px;
      color: #d11f1f;
      cursor: pointer;
    }
  }
}
.dataBox {
  margin-left: 10px;
  a {
    color: #409eff;
    margin-right: 5px;
  }
}
</style>
